<template>
  <div class="rechargeRecord">
    <el-card>
      <h4 class="title">工单记录</h4>
      <el-card>
        <!-- 搜索 -->
        <span v-if="this.$store.state.user.role == 'admin'">
          用户：
          <el-select
            size="medium"
            v-model="username"
            placeholder="请下拉选择用户"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </span>

        日期：
        <el-date-picker
          size="medium"
          v-model="billTime"
          type="month"
          format="yyyy 年 MM 月"
          value-format="yyyy_MM "
          placeholder="请选择一个月份"
        >
        </el-date-picker>
        状态：
        <el-select size="medium" v-model="billStatus" placeholder="请选择">
          <el-option
            v-for="item in stausoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="queryDetails()"
          >查询</el-button
        >
      </el-card>
      <!-- 表格内容 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" width="50">
        </el-table-column>
        <el-table-column align="center" prop="username" label="充值账号">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="充值时间">
        </el-table-column>
        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.balance | currency("￥")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="billStatus" label="充值状态">
          <template slot-scope="scope">
            <span v-if="scope.row.billStatus == 'NOT_OUT'"> 未出账</span>
            <span v-if="scope.row.billStatus == 'OUT'"> 已出账</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- currentPage -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageCode"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.totalCount"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getUsername } from "@/api/order";
import { getWorkOrder } from "@/api/titck";

// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      tableData: [],
      totalCount: 1,
      pageSize: 10,
      pageCode: 1,
      username: "",
      billTime: "",
      billStatus: "",
      // 下拉框
      stausoptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "OUT",
          label: "已出账",
        },
        {
          value: "NOT_OUT",
          label: "未出账",
        },
      ],
      // 下拉框
      options: [],
    };
  },
  async created() {
    // 获取用户名
    let res = await getUsername();
    if (res.status == 0) {
      this.options = res.data;
    }

    if (this.$store.state.user.role == "admin") {
      // 获取表格数据
      let res1 = await getWorkOrder();
      this.tableData = res1.data.pageList;
      this.totalCount = res1.data.totalCount;
      this.pageCode = res1.data.pageCode;
      //console.log(res1);
    } else {
      this.username = localStorage.getItem("username");
      // 获取表格数据
      let data = {
        username: this.username,
      };
      let res1 = await getWorkOrder(data);
      this.tableData = res1.data.pageList;
      this.totalCount = res1.data.totalCount;
      this.pageCode = res1.data.pageCode;
      //console.log(res1);
    }
  },
  methods: {
    // 查询明细
    queryDetails: debounce(async function () {
      let data = {
        username: this.username,
        billTime: this.billTime,
        billStatus: this.billStatus,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
      };
      let res = await getWorkOrder(data);
      this.tableData = res.data.pageList;
      this.totalCount = res.data.totalCount;

      //console.log(res);
    }, 500),
    //表格分页
    async handleSizeChange(val) {
      ////console.log(`每页 ${val} 条`);
      this.pageSize = val;
      let data = {
        username: this.username,
        billTime: this.billTime,
        billStatus: this.billStatus,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
      };
      let res = await getWorkOrder(data);
      this.tableData = res.data.pageList;
      this.totalCount = res.data.totalCount;
    },
    async handleCurrentChange(val) {
      ////console.log(`当前页: ${val}`);
      ////console.log(this.nameinput);
      this.pageCode = val;
      let data = {
        username: this.username,
        billTime: this.billTime,
        billStatus: this.billStatus,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
      };
      let res = await getWorkOrder(data);
      this.tableData = res.data.pageList;
      this.totalCount = res.data.totalCount;
    },
  },
};
</script>

